/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { message, Button, Card, DatePicker, Tag, Icon, Checkbox, Row, Col, Collapse, Radio, TreeSelect } from 'antd';
import style from './DataSta.less';
import Container from '../../../components/common/Container';
import PublicService from '../../../services/PublicService';
import request from '../../../utils/request';
import moment from 'moment';
import StaTu from '../Echarts/StaTu';
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
const RadioGroup = Radio.Group;
const Panel = Collapse.Panel;

var Group = [

]
class DataSta extends Component {

    constructor(props) {
        super(props)


    }

    state = {
        treeData:[],
        Radiovalue:"",
        Radiovalue1: "进气量",
        idList: [],
        dan: true,
        duo: false,
        loading: false,
        takeTime: null,
        takeTimeStart: null,
        takeTimeEnd: null,
        selectedRowKeys: [],
        selectedRows: [],
        dataSource: [],
        pageIndex: 1,
        pageSize: 10,
        GroupArr: '单站点',
        GroupArrMo: [],
        GroupArrMo1: ["进气量"],
        StaTuData: {}

    }

    componentDidMount() {
        //获取燃气站点
        request({
            url: `/zhrq-web/gas/gaspandect/getGasSiteList`,
            method: 'POST',
            data: {}
        }).then(data => {
            console.log(data)
            if (data.rc === 0) {

                this.setState({
                    treeData:data.ret.list
                })

                setTimeout(() => {
                    console.log(this.state.treeData)
                }, 1000);
            }
        })

    }

    onGroup = (e) => {
        if (e.target.value == '单站点') {
            this.setState({
                dan: true,
                duo: false
            })
        }

        if (e.target.value == '单指标') {
            this.setState({
                dan: false,
                duo: true
            })
        }
        this.setState({
            GroupArr: e.target.value,
            value:[]
        })


    }



    onGroupMo = (checkedValues) => {
        if (this.state.GroupArr == '单指标') {
            this.setState({
                GroupArrMo: checkedValues
            })
        }
    }

    onGroupMo1 = (checkedValues) => {

        this.setState({
            GroupArrMo1: checkedValues
        })

    }

    onDatePicker = (val, v, el) => {
        console.log(val, v, el)
        this.setState({
            [val]: v
        })


    }

    //跳转详情按钮
    onDetails = (record) => {


    }

    //查询按钮
    save = (page, rows, tom) => {
        console.log(this.state.GroupArrMo, this.state.takeTimeStart, this.state.takeTimeEnd)
        if (this.state.GroupArr == '单站点') {
            if(this.state.Radiovalue === "") {
                message.warning("请选取站点后查询!")
                this.setState({
                    loading:false
                })
                return
            }
            console.log(this.state.Radiovalue, this.state.GroupArrMo1)
            let data = {
                groupSignId: this.state.Radiovalue,
                indexList: this.state.GroupArrMo1,
                takeTimeEnd: this.state.takeTimeEnd ? moment(this.state.takeTimeEnd).format("YYYY-MM-DD HH:mm:ss") : "",
                takeTimeStart: this.state.takeTimeStart ? moment(this.state.takeTimeStart).format("YYYY-MM-DD HH:mm:ss") : "",
            }
            request({
                url: `/zhrq-web/gas/gaspandect/statisticsSingleSite`,
                method: 'POST',
                data: data
            }).then(data => {
                console.log(data)
                if (data.rc == 0) {
                    this.setState({
                        StaTuData: data.ret
                    })
                } else {
                    message.warning("请选择单站点查询!")
                }
            })
        }

        if (this.state.GroupArr == '单指标') {

            console.log(this.state.Radiovalue1, this.state.GroupArrMo)
            let data = {
                groupSignIdList: this.state.GroupArrMo,
                index: this.state.Radiovalue1,
                takeTimeEnd: this.state.takeTimeEnd ? moment(this.state.takeTimeEnd).format("YYYY-MM-DD HH:mm:ss") : "",
                takeTimeStart: this.state.takeTimeStart ? moment(this.state.takeTimeStart).format("YYYY-MM-DD HH:mm:ss") : "",
            }

            request({
                url: `/zhrq-web/gas/gaspandect/statisticsSingleIndex`,
                method: 'POST',
                data: data
            }).then(data => {
                console.log(data)
                if (data.rc == 0) {
                    this.setState({
                        StaTuData: data.ret
                    })
                }
            })

        }


    }

    //单站点
    onRadioGroup = (e) => {
        console.log(e.target.value)
        this.setState({
            Radiovalue: e.target.value
        })
    }

    onRadioGroup1 = (e) => {
        console.log(e.target.value)
        this.setState({
            Radiovalue1: e.target.value
        })
    }


    onTreeSelect = (v,b,n) => {
        console.log(v,b,n)
        this.setState({
            GroupArrMo:v,
            Radiovalue:v,
            value:v
        })
    }

    render() {
        const { treeData,loading, selectedRowKeys, dataSource, pageIndex, pageSize } = this.state
        const columns = this.columns
        const windowWidth = document.body.clientWidth;
        const TimeCondan = [{
            key: "1",
            con: <span><DatePicker size='small' value={this.state.takeTimeStart} onChange={this.onDatePicker.bind(this, "takeTimeStart")} /> 到
             <DatePicker style={{ marginLeft: 10 }} size='small' onChange={this.onDatePicker.bind(this, "takeTimeEnd")} value={this.state.takeTimeEnd} /></span>
        }]

        const TimeConduo = [{
            key: "1",
            con: <span>
                <DatePicker size='small' onChange={this.onDatePicker.bind(this, "takeTime")} value={this.state.takeTime} />
            </span>
        }]
        const height = document.body.clientHeight;
        let containerHeight = '66vh';
        if (windowWidth > 1367) {
            containerHeight = '68vh';
        }

        const idList1 = [
            {
                name: "进气量",
                id: "进气量",
                key: "进气量"
            },
            {
                name: "销售量",
                id: "销售量",
                key: "销售量"
            },
            {
                name: "库存量",
                id: "库存量",
                key: "库存量"
            },
            {
                name: "报警数量",
                id: "报警数量",
                key: "报警数量"
            },

        ]


        return (
            <div>
                <div className={style.topBox}>
                    <Card
                        className={style.topCard}
                        bodyStyle={{ padding: 10,height:"20vh" ,display:"flex",justifyContent:"space-between",flexDirection:"column"}}
                    >
                        <p>
                            <RadioGroup style={{ width: '100%' }} onChange={this.onGroup}  value={this.state.GroupArr} >

                                <Row>
                                    <Col span={2}  style={{lineHeight:1.5}}> 模式选取 :</Col>
                                    <Col span={2}><Radio value="单站点">单站点</Radio ></Col>
                                    <Col span={2}><Radio value="单指标">单指标</Radio ></Col>
                                    <Col span={10}>
                                        <span style={{ marginRight: 10, float: "left",lineHeight:1.5 }}>时间选取 : </span>


                                        {
                                            TimeCondan.map((item, key) => {
                                                return (
                                                    item.con
                                                )
                                            })
                                        }



                                    </Col>
                                    <Col span={4}>
                                        <Button type="primary" size="small" onClick={this.save.bind(this, 1, 10)}>查询</Button>
                                        <Button size="small" style={{ marginLeft: 10 }}>重置</Button>
                                    </Col>


                                </Row>
                            </RadioGroup>
                        </p>
                        <p >
                            {
                                this.state.duo &&
                                <RadioGroup style={{ width: '100%'}} value={this.state.Radiovalue1} onChange={this.onRadioGroup1}>
                                    <Row style={{ }}>
                                        <Col span={2}> 指标选取 :</Col>
                                        {
                                            idList1.map((item, key) => {
                                                return (
                                                    <Col span={2}><Radio value={item.id}>{item.name}</Radio></Col>
                                                )
                                            })
                                        }
                                    </Row>
                                </RadioGroup>
                            }


                            {
                                this.state.dan &&
                                <Checkbox.Group style={{ width: '100%'}} onChange={this.onGroupMo1} className={style.Group}
                                    value={this.state.GroupArrMo1}
                                >
                                    <Row >
                                        <Col span={2}> 指标选取 :</Col>
                                        {
                                            idList1.map((item, key) => {
                                                return (
                                                    <Col span={2}><Checkbox value={item.id}>{item.name}</Checkbox></Col>
                                                )
                                            })
                                        }
                                    </Row>
                                </Checkbox.Group>
                            }


                        </p>

                        <p>


                            <Row style={{ paddingBottom: "-3px" }}>
                                <Col span={2}  style={{lineHeight:1.5}}> 站点选取 :</Col>
                                <Col span={6}>
                                    <TreeSelect
                                        size="small"
                                        maxTagCount={1}
                                        style={{ width: 210 }}
                                        treeData={treeData}
                                        value={this.state.value}
                                        onChange={this.onTreeSelect}
                                        // treeCheckable={true}
                                        // treeCheckStrictly={true}
                                        // showCheckedStrategy={TreeSelect.SHOW_CHILD}
                                        // searchPlaceholder: 'Please select',
                                        // treeDefaultExpandAll={true}
                                        treeCheckable={this.state.duo}
                                        treeDataSimpleMode={true}

                                    />
                                </Col>
                            </Row>



                        </p>


                    </Card>

                </div>
                <div className={style.bottomBox}>
                </div>
                <Container
                    style={{ height: containerHeight, position: "relative", marginTop: "1vh" }}
                >


                    <StaTu
                        data={this.state.StaTuData}
                    />
                </Container>

            </div>
        )
    }
}
export default (DataSta);
